<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/shopping.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="header-wrap header-list">
            <h1><img src="./images/fila_blue_150.png" alt="" class="dom_center"></h1>
            <div class="header-right">
                <input type="text" placeholder="短袖"><button>搜索</button>
                <a href="" class="enter">登入</a>
                <a href="" class="login">注册</a>
                <a href="" class="shop_cart"><img src="./images/cart-blue.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 结算 -->
    <div class="account-wrap">
        <div class="account-t">
            <h2>结算</h2>
            <h3>收货地址</h3>
            <ul class="site">
                <li>
                    <span>辛乾</span>
                    <span>17602980647</span>
                    <p>江苏省无锡市南长区胡家庙202号</p>
                    <a href="#">编辑</a>
                </li>
                <li>
                    <em>+</em><br>
                    <i>添加收货地址</i>
                    <div class="city">
                        <h2>
                            新增地址
                            <div class="errey float_right">×</div>
                        </h2>
                        <div class="name">
                            <i>收货人</i>
                            <input type="text" placeholder="姓名">
                        </div>
                        <div class="namePhone">
                            <i>手机号</i>
                            <input type="text" placeholder="手机号">
                        </div>
                        <div class="site-city">
                            省<select name="" id="province"></select>
                            市<select name="" id="city"></select>
                            区<select name="" id="area"><select>
                        </div>
                        <div class="cityS">
                            <i>详细地址</i>
                            <input type="text" placeholder="详细地址">
                        </div>
                        <div class="affirm">
                            <button class="getback">返回</button>
                            <button class="save">保存地址</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="account-c">
            <h3>商品明细</h3>
            <ul>
                <li>商品信息</li>
                <li>属性</li>
                <li>数量</li>
                <li>单价</li>
            </ul>
            <p>
                <img src="./images/2.jpg" alt="" class="float_left img">
                <span class="float_left names">帆布鞋</span>
            </p>
            <p>
                <span class="color">白色</span>
                <span class="size">40</span>
            </p>
            <p>1</p>
            <p class="money">￥451.00</p>
        </div>
        <div class="account-b">
            <div class="commodity">1件商品</div>
            <div class="commodity-total">
                <span>商品总价：</span><span class="jiage">450.00</span>
            </div>
            <div class="total">
                <span>总价：</span><span class="zjia">450.00</span>
            </div>
            <a href="http://127.0.0.1:81/mycart.html" class="sumit">提交订单</a>
            <p class="hint">重要提醒：本商城不支持任何形式的刷单活动，请勿轻信刷单广告。</p>
        </div>
    </div>
    <!-- 底部 -->
    <div id="foot">
        <div class="foot-wrap">
            <ul class="float_left">
                <li><a href="">购物服务</a></li>
                <li><a href="">关于品牌</a></li>
                <li><a href="">查找门店</a></li>
                <li>关注FLIA官方媒体:
                    <a href="" class="microblog"></a>
                    <a href="" class="WeChat"></a>
                </li>
                <li>售后服务电话：400-886-7699</li>
            </ul>
            <div class="foot_right float_right">
                <p>©FILA体育 闽ICP备11020421号-8 闽公网安备35020302033807号</p>
                <p>©2020 FILA Luxembourg S.à.r.l. - All Rights Reserved -</p>
            </div>
        </div>
    </div>
    <div class="service">
        <a href="">客服</a>
    </div>
    <script src="./js/citys.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function(){
            let liList = $(".site li")
            liList.click(function(){
                $(".city").show()
            })
            $(".errey").click(function(){
                $(".city").hide()
                alert(0)
            })
        })
    </script>
    <script>
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")
        // 更新区域数据
        function updateArea() {
            // 清掉区内的内容准备重新插入
            area.html("")
            // 返回当前选中的城市的数据对象
            let cData = citys[province[0].selectedIndex].city[city[0].selectedIndex].area;
            cData.forEach((item, index) => {
                let option = $(`<option>${item}</option>`)
                area.append(option)
            })
            map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        }
        province.change(function () {
            // 清掉城市内的内容准备重新插入
            city.html("")
            // 返回当前选中的省份的数据对象
            let pData = citys[this.selectedIndex];

            pData.city.forEach((item, index) => {
                let option = $(`<option>${item.name}</option>`)
                city.append(option)
            })

            updateArea()
        })
        city.change(function () {
            updateArea()
        })
        area.change(function () {
            map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        })
        citys.forEach((item, index) => {
            let option = $(`<option>${item.name}</option>`)
            province.append(option)
            city.append(`<option>${citys[0].city[0].name}</option>`)
            area.append(`<option>${citys[0].city[0].area[0]}</option>`)
        })
    </script>
    <script>
        let id = window.location.href.slice(window.location.href.indexOf("?") + 4)
              console.log(id)
              $.ajax({
                  url:"http://127.0.0.1:81/getDetails",
                  data:{
                      id:id
                  },
                  success:function(data){
                      console.log(data)
                      JSON.parse(data).forEach(item => {
                        $(".img").attr("src",`./images/${item.src}`)
                        $(".names").html(item.name)
                        $(".money").html(`￥${item.price}.00`)
                        $(".jiage").html(`￥${item.price}.00`)
                        $(".zjia").html(`￥${item.price}.00`)
                      })
                  }
              })
            // 添加地址
              $(".save").click(function(){
                  let names = $(".name input").val()
                  let phones = $(".namePhone input").val()
                  let city = $(".cityS input").val()
                  console.log(name)
                  $.ajax({
                      url:"http://127.0.0.1:81/addCity",
                      data:{
                          "names" : "names",
                          "phones": "phones",
                          "city" : "city"
                      },
                      success:function(data){
                        console.log(data)
                      }
                  })
              })
    </script>
</body>

</html>